import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import React from 'react'
import { Icon, ListItem } from '@rneui/themed'
import { Avatar } from '@rneui/base'
import { zhSpacingColBase, zhSpacingColLg } from '../../global'

export default function my() {
  return (
    <>
      {/* F1 */}
      <ListItem
        containerStyle={{
          backgroundColor: '#090',
          paddingVertical: 30
        }}
      >
        <Avatar 
          source={{
            uri: 'https://randomuser.me/api/portraits/men/36.jpg'
          }}
          rounded
          size={80}
        />
        <ListItem.Content>
          <ListItem.Title style={ss.white}>Firm</ListItem.Title>
          <ListItem.Subtitle style={ss.white}>13386729821</ListItem.Subtitle>
        </ListItem.Content>
        <TouchableOpacity 
          activeOpacity={0.8} 
          style={{flexDirection: 'row', alignItems: 'center'}}
        >
          <Icon
            type='antdesign' 
            name='qrcode' 
            color='#FFF'  
            style={{marginRight: 8}}
          />
          {/* <ListItem.Chevron /> */}
          <Icon type='simple-line-icon' size={15} name='arrow-right' color='#FFF' />
        </TouchableOpacity>
        
      </ListItem>
    
      {/* F2 */}
      <ListItem 
        containerStyle={{marginVertical: zhSpacingColBase}}
        onPress={() => console.log('点击了')}
      >
        <Icon 
          type='entypo' 
          name='chat' 
          color='#090' 
          containerStyle={ss.w40}
        />
        <ListItem.Content>
          <ListItem.Title>我的互动</ListItem.Title>
        </ListItem.Content>
        <Icon type='simple-line-icon' size={15} name='arrow-right' />
      </ListItem>

      <ListItem bottomDivider>
        <Icon 
          type='font-awesome-5' 
          name='door-open' 
          color='#1296DB' 
          containerStyle={ss.w40}
        />
        <ListItem.Content>
          <ListItem.Title>开门记录</ListItem.Title>
        </ListItem.Content>
        <Icon type='simple-line-icon' size={15} name='arrow-right' />
      </ListItem>
      <ListItem bottomDivider>
        <Icon 
          type='font-awesome' 
          name='rmb' 
          color='#1296DB'
          size={34} 
          containerStyle={ss.w40}
        />
        <ListItem.Content>
          <ListItem.Title>缴费记录</ListItem.Title>
        </ListItem.Content>
        <Icon type='simple-line-icon' size={15} name='arrow-right' />
      </ListItem>
      <ListItem>
        <Icon 
          type='material' 
          name='place' 
          color='#090'
          size={32}
          containerStyle={ss.w40}
        />
        <ListItem.Content>
          <ListItem.Title>收货地址</ListItem.Title>
        </ListItem.Content>
        <Icon type='simple-line-icon' size={15} name='arrow-right' />
      </ListItem>

      {/* F4 */}
      <ListItem containerStyle={{marginTop: zhSpacingColLg*2}}>
        <Icon 
          type='antdesign' 
          name='setting'
          size={32}
          containerStyle={ss.w40}
        />
        <ListItem.Content>
          <ListItem.Title>设置</ListItem.Title>
        </ListItem.Content>
        <Icon type='simple-line-icon' size={15} name='arrow-right' />
      </ListItem>
    </>
  )
}

const ss = StyleSheet.create({
  white: {
    color: '#FFF'
  },
  w40: {
    width: 40
  }
})